<template>
	<view class="u-notice-bar-wrap" v-if="isShow">
		<block>
			<columnnotice
				:bgColor="bgColor"
				:list="list"
				:leftIcon="leftIcon"
				:color="color"
				:fontSize="fontSize"
				:isDetail="isDetail"
				@end="end"
			></columnnotice>
		</block>
	</view>
</template>
<script>

import columnnotice from './column-notice.vue';
export default {
	name: "m-notice-bar",
	components:{
		columnnotice
	},
	props: {
		// 显示的内容，数组
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		// 字体大小，单位rpx
		fontSize: {
			type: [Number, String],
			default: 26
		},
		/// 详情展示内容不同首页
		isDetail: {
			type: Boolean,
			default: false
		},
		// 是否显示左侧的图标
		leftIcon: {
			type: Boolean,
			default: true
		},
		// 文字颜色，各图标也会使用文字颜色
		color: {
			type: String,
			default: ''
		},
		// list列表为空时，是否显示组件
		noListHidden: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		// 如果设置show为false，或者设置了noListHidden为true，且list长度又为零的话，隐藏组件
		isShow() {
			if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
			else return true;
		}
	},
	methods: {
	}
};
</script>

<style lang="scss" scoped>
.u-notice-bar-wrap {
	overflow: hidden;
}

.u-notice-bar {
	padding: 18rpx 24rpx;
	overflow: hidden;
}

.u-direction-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.u-left-icon {
	display: flex;
	align-items: center;
}

.u-notice-box {
	flex: 1;
	display: flex;
	overflow: hidden;
	margin-left: 12rpx;
}

.u-right-icon {
	margin-left: 12rpx;
	display: flex;
	align-items: center;
}

.u-notice-content {
	line-height: 1;
	white-space: nowrap;
	font-size: 26rpx;
	animation: u-loop-animation 10s linear infinite both;
	text-align: right;
	// 这一句很重要，为了能让滚动左右连接起来
	padding-left: 100%;
}

@keyframes u-loop-animation {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(-100%, 0, 0);
	}
}
</style>
